<script setup>
import {OPERATE_DRAWER_MODE} from "@/common/constant.js";
import {computed, ref} from "vue";
import {add, detailById, modifyById} from "@/apis/sys/user.js";
import {useMessage} from 'naive-ui'
import DeptTreeSelect from "@/components/dept-tree-select.vue";
import RoleSelect from "@/components/role-select.vue";

const message = useMessage();

const formRef = ref(undefined)
const show = defineModel('show')
const props = defineProps({
  mode: {
    type: Number,
    default: OPERATE_DRAWER_MODE.DETAIL
  },
  id: {
    type: String,
    default: undefined
  }
})
const emits = defineEmits(['success'])

const showSubmitBtn = computed(() => {
  return props.mode === OPERATE_DRAWER_MODE.ADD || props.mode === OPERATE_DRAWER_MODE.EDIT
})
const disabled = computed(() => {
  return props.mode === OPERATE_DRAWER_MODE.DETAIL
})
const title = computed(() => {
  if (props.mode === OPERATE_DRAWER_MODE.ADD) {
    return '新增用户'
  } else if (props.mode === OPERATE_DRAWER_MODE.EDIT) {
    return '修改用户'
  } else {
    return '用户详情'
  }
})
const formDataInitValue = {
  username: undefined,
  deptNo: undefined,
  roleIds: []
}

const formData = ref({...formDataInitValue})

const onAfterEnter = () => {
  if (props.mode === OPERATE_DRAWER_MODE.DETAIL || props.mode === OPERATE_DRAWER_MODE.EDIT) {
    loadDetail(props.id)
  }
}

const onAfterLeave = () => {
  resetForm()
}

const resetForm = () => {
  formData.value = {...formDataInitValue};
};

const loadDetail = async (id) => {
  const {code, data} = await detailById(id)
  if (code === 0) {
    formData.value = data
  }
}


const onFinish = () => {
  formRef.value.validate()
      .then(async () => {
        if (props.mode === OPERATE_DRAWER_MODE.ADD) {
          const {code} = await add(formData.value)
          if (code === 0) {
            message.success('新增成功')
            show.value = false
            emits('success')
          }
        } else if (props.mode === OPERATE_DRAWER_MODE.EDIT) {
          const {code} = await modifyById(props.id, formData.value)
          if (code === 0) {
            message.success('修改成功')
            show.value = false
            emits('success')
          }
        }
      })
}

const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  deptNo: [
    {required: true, message: '请选择部门', trigger: 'change'}
  ],
  roleIds: [
    {type: 'array', required: true, message: '请选择关联角色', trigger: 'change'}
  ]
}
</script>

<template>
  <n-drawer
      v-model:show="show"
      resizable
      :min-width="502"
      :default-width="502"
      @after-enter="onAfterEnter"
      @after-leave="onAfterLeave">
    <n-drawer-content :title="title" closable :native-scrollbar="false">
      <n-form :model="formData" label-placement="left" label-width="80" ref="formRef" :rules="rules">
        <n-form-item label="用户名" path="username">
          <n-input v-model:value="formData.username" placeholder="请输入" clearable :disabled="disabled"/>
        </n-form-item>
        <n-form-item label="所属部门" path="deptNo">
          <dept-tree-select v-model:value="formData.deptNo" :disabled="disabled"/>
        </n-form-item>
        <n-form-item label="关联角色" path="roleIds">
          <role-select v-model:value="formData.roleIds" :disabled="disabled" multiple/>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button type="primary" @click="onFinish" v-if="showSubmitBtn">提交</n-button>
          <n-button @click="show = false">取消</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>